<template>
  <a-modal v-model:visible="modalVisible" @ok="handleOk" @cancel="closeModal">
    <template #title>
      {{ props.data.id ? '新增文件夹' : '修改文件夹' }}
    </template>
    <div>
      <a-form
        :rules="rules"
        ref="formRef"
        layout="vertical"
        :model="form"
        auto-label-width
      >
        <a-form-item field="parentId" label="父级文件夹:" required>
          <a-cascader
            :field-names="fieldNames"
            :options="getTreeData"
            v-model="form.parentId"
            check-strictly
            placeholder="请选择上层文件夹"
          />
        </a-form-item>
        <a-form-item field="storeName" label="名称" required>
          <a-input v-model="form.storeName" allow-clear />
        </a-form-item>
        <a-form-item field="status" label="数据状态:">
          <a-switch
            v-model="form.status"
            :checked-value="1"
            :unchecked-value="2"
          />
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import { reactive, computed, ref, watchEffect } from 'vue';
import { getPubliceFileBelong } from '@/apis/document/documentCenter/index';

const props = withDefaults(
  defineProps<{
    visible: boolean;
    data: any;
  }>(),
  {
    visible: false
  }
);
const fieldNames = { value: 'id', label: 'storeName' };
const initialize = ref(false);
const emit = defineEmits(['update:visible', 'addDocumentEmit']);
const getTreeData = ref();
const getTableData = async () => {
  try {
    const res = await getPubliceFileBelong();
    getTreeData.value = [res];
  } catch (err: unknown) {
    console.log(err);
  }
};

const userId = Number(localStorage.getItem('userId'));
const formRef = ref();
// 判断用户是否显示弹出框
const modalVisible = computed({
  get() {
    return props.visible;
  },
  set(visible: boolean) {
    emit('update:visible', visible);
  }
});

const rules = {
  parentId: [{ required: true, message: '请选择上级文件夹' }],
  storeName: [{ required: true, message: '请输入名称' }]
};

const treeData = ref([]);

let form = reactive<any>({
  storeName: '',
  parentId: null,
  clientId: undefined,
  status: 1
});

const closeModal = () => {
  modalVisible.value = false;
};

// 确定
const handleOk = async () => {
  console.log(formRef.value);
  const check = await formRef.value.validate();
  if (!check) {
    emit('addDocumentEmit', form);
    form = {
      storeName: '',
      parentId: null,
      clientId: undefined,
      status: 1
    };
    // closeModal(); // 关闭模态框`;
    // await formRef.value.resetFields();
  }
  // FormData.value.validate((res: any) => {
  // if (!res) {

  // modalVisible.value = false;
  // }
  // });
};

// 取消
const handleCancel = () => {
  modalVisible.value = false;
};

watchEffect(() => {
  if (modalVisible.value) {
    getTableData();
  }
});
</script>

<style scoped lang="less"></style>
